<template>
  <el-table :data="filteredData">
    <custom-table-header
      label="姓名"
      prop="name"
      :filterOptions="nameFilterOptions"
      @filter-change="handleFilterChange"
    />
    <custom-table-header
      label="年龄"
      prop="age"
      :filterOptions="ageFilterOptions"
      @filter-change="handleFilterChange"
    />
  </el-table>
</template>

<script setup>
import { ref, computed } from 'vue';
import CustomTableHeader from './zi_1.vue';

const tableData = ref([
  { name: '张三', age: 25 },
  { name: '李四', age: 30 },
  { name: '王五', age: 35 },
]);

const nameFilterOptions = ref([
  { label: '张三', value: '张三' },
  { label: '李四', value: '李四' },
  { label: '王五', value: '王五' },
]);

const ageFilterOptions = ref([
  { label: '25', value: 25 },
  { label: '30', value: 30 },
  { label: '35', value: 35 },
]);

// 存储筛选条件
const filters = ref({
  name: null,
  age: null,
});

// 根据筛选条件过滤数据
const filteredData = computed(() => {
  return tableData.value.filter(item => {
    const nameMatch = !filters.value.name || item.name === filters.value.name;
    const ageMatch = !filters.value.age || item.age === filters.value.age;
    return nameMatch && ageMatch;
  });
});

// 处理筛选条件变化
const handleFilterChange = (value, prop) => {
  filters.value[prop] = value;
};
</script>